/* ------------------------------------------------------------------------------
*
*  # jQuery UI Widgets
*
*  Styles for jQuery UI widgets
*
*  Version: 1.2
*  Latest update: Aug 10, 2016
*
* ---------------------------------------------------------------------------- */

// Accordion
// -------------------------

// Base
.ui-accordion {

  // Header
  .ui-accordion-header {
    display: block;
    cursor: pointer;
    margin: 0;
    outline: 0;
    position: relative;
    background-color: @panel-bg;
    padding: @panel-heading-padding;
    border: 1px solid @panel-default-border;
    margin-top: 5px;
    border-radius: @panel-border-radius;

    // Remove top margin from the first item
    &:first-child {
      margin-top: 0;
    }

    // Border radius correction
    &.ui-accordion-header-active {
      .border-bottom-radius(0);
    }

    // Icons
    .ui-accordion-header-icon {
      position: absolute;
      top: 50%;
      right: @content-padding-large;
      margin-top: -(@icon-font-size / 2);

      // Iconll
      &:before {
        content: '\e9b8';
        font-family: 'Icomoon';
        display: block;
        width: @icon-font-size;
        font-size: @icon-font-size;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }
  }

  // Change icon in active header
  .ui-accordion-header-active {
    .ui-accordion-header-icon:before {
      content: '\e9b7';
    }
  }

  // Icons
  .ui-accordion-icons {
    padding-right: (@content-padding-large + @content-padding-small + @icon-font-size);
  }

  // Content
  .ui-accordion-content {
    padding: @panel-body-padding;
    background-color: @panel-bg;
    border: 1px solid @panel-default-border;
    border-top: 0;
    overflow: auto;
    .border-bottom-radius(@panel-border-radius);
  }
}

// Sortable vertical spacing
.accordion-sortable-group {
  & + & {
    margin-top: 5px;
  }
}

// Autocomplete
// -------------------------

// Base
.ui-autocomplete {
  position: absolute;
  display: none;
  padding: @list-spacing 0;
  z-index: @zindex-dropdown;
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;

  // Category title
  .ui-autocomplete-category {
    padding: (@padding-base-vertical + 1) @padding-base-horizontal;
    font-size: @font-size-mini;
    line-height: @line-height-mini;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 2px;
    margin-bottom: 2px;

    // Optgroup items have double horizontal spacing
    ~ .ui-menu-item {
      padding-left: (@padding-base-horizontal * 2);
    }
  }
}

// Animated processing icon
.ui-autocomplete-processing:after {
  content: '\eb51';
  font-family: 'Icomoon';
  display: inline-block;
  position: absolute;
  top: 50%;
  right: @padding-base-horizontal;
  width: @icon-font-size;
  text-align: right;
  margin-top: -(@icon-font-size / 2);
  font-size: @icon-font-size;
  line-height: 1;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  .animation(rotation 1s linear infinite);
}

// Inside input group, remove border and border radius from the last element
.input-group {
  .ui-autocomplete-input {
    + .input-group-btn,
    + .input-addon {
      > .btn {
        border-left: 0;
        .border-left-radius(0);
      }
    }
  }
}

// Buttons
// -------------------------

// Base
.ui-button {
  display: inline-block;
  position: relative;
  touch-action: manipulation;
  margin-bottom: 0;
  padding: @padding-base-vertical @padding-base-horizontal;
  border-radius: @border-radius-base;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  background-color: @btn-default-bg;
  border: 1px solid @btn-default-border;
  color: @btn-default-color;

  // Hover and focus states
  &.ui-state-hover,
  &.ui-state-focus {
    color: @btn-default-color;
    .box-shadow(0 0 0 100px fade(#000, 1%) inset);
  }

  // Active state
  &.ui-state-active {
    .box-shadow(0 0 0 100px fade(#000, 3%) inset);
  }

  // Disabled
  &.ui-state-disabled {
    cursor: @cursor-disabled;
    .opacity(.65);
    .box-shadow(none);
  }

  // Colored button
  &[class*=bg-] {
    &.ui-state-hover,
    &.ui-state-focus {
      color: #fff;
      .box-shadow(0 0 0 100px fade(#000, 5%) inset);
    }
    &.ui-state-active {
      .box-shadow(0 0 0 100px fade(#000, 10%) inset);
    }
  }

  // Transparent button
  &.ui-button-link {
    background-color: transparent;
    border-color: transparent;

    // Change link color on hover and focus
    &.ui-state-hover,
    &.ui-state-focus {
      color: @link-hover-color;
    }

    // Remove box shadow
    &.ui-state-hover,
    &.ui-state-focus,
    &.ui-state-active {
      .box-shadow(none);
    }
  }

  // Reset extra padding in Firefox
  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
}

//
// Buttons with icons
//

// Primary icon
.ui-button-icon-primary {
  .ui-button-text-icon-primary &,
  .ui-button-text-icons &,
  .ui-button-icons-only {
    margin-right: @element-horizontal-spacing;
  }
}

// Secondary icon
.ui-button-icon-secondary {
  .ui-button-text-icon-secondary &,
  .ui-button-text-icons &,
  .ui-button-icons-only & {
    margin-left: @element-horizontal-spacing;
  }
}

// Icon only
.ui-button-icon-only {
  padding-left: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) - 1);
  padding-right: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) - 1);
}

// Hide text in button with icons only
.ui-button-text {
  .ui-button-icon-only &,
  .ui-button-icons-only & {
    display: none;
  }
}

//
// Button sets
//

// Base
.ui-buttonset {
  display: inline-block;
  vertical-align: middle;
  position: relative;

  // Child buttons
  .ui-button {
    border-radius: 0;
    margin-left: -1px;
    float: left;
  }

  // Remove left margin for first childs
  .ui-button:first-child,
  .ui-helper-hidden-accessible:first-child + .ui-button {
    margin-left: 0;
  }

  // Add border radius for the first button
  .ui-button:first-child,
  .ui-helper-hidden-accessible:first-child + .ui-button:not(:last-child) {
    .border-left-radius(@border-radius-base);
  }

  // Add border radius for the last button
  .ui-button:last-child {
    .border-right-radius(@border-radius-base);
  }
}

// Split button
.ui-buttonset-split {
  position: relative;
  display: inline-block;

  > ul {
    position: absolute;
    text-align: left;
    min-width: 180px;
  }
}

// Datepicker
// ------------------------------

// Base
.ui-datepicker {
  min-width: 270px;
  background-color: @dropdown-bg;
  padding: (@list-spacing * 2);
  display: none;
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base;
  z-index: 190;
  .box-shadow(0 1px 3px fade(#000, 10%));

  // Make it flexible in sidebar
  .sidebar & {
    min-width: 0;
  }

  // Header
  // ------------------------------

  // Base
  .ui-datepicker-header {
    position: relative;
  }

  // Title
  .ui-datepicker-title {
    margin: 0 40px;
    padding-top: @content-padding-base;
    padding-bottom: @content-padding-base;
    font-size: @font-size-h6;
    text-align: center;
    line-height: 1;

    // Show month
    .ui-datepicker-month {
      font-weight: 500;
    }

    // Show year
    .ui-datepicker-year {
      font-size: @font-size-small;
      color: @text-muted;
      margin-left: 5px;
    }

    // Date select
    select {
      outline: 0;
      height: (@icon-font-size + (@padding-base-vertical * 2));
      border-color: @input-border;

      &.ui-datepicker-month,
      &.ui-datepicker-year {
        width: 48%;
        font-size: @font-size-base;
        font-weight: 400;
        color: @text-color;
      }
    }
  }

  // Nav buttons
  // ------------------------------

  // Base
  .ui-datepicker-prev,
  .ui-datepicker-next {
    position: absolute;
    top: 50%;
    margin-top: -((@icon-font-size / 2) + @padding-base-vertical);
    line-height: 1;
    color: @text-color;
    padding: @padding-base-vertical;
    border-radius: @border-radius-small;

    // Icon base
    &:after {
      font-family: 'icomoon';
      display: block;
      font-size: @icon-font-size;
      width: @icon-font-size;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    // Hide text
    span {
      display: none;
    }
  }

  // Prev button icon
  .ui-datepicker-prev {
    left: 0;

    &:after {
      content: '\e9c8';
    }
  }

  // Next btn icon
  .ui-datepicker-next {
    right: 0;

    &:after {
      content: '\e9cb';
    }
  }

  // Hover state
  .ui-datepicker-prev-hover,
  .ui-datepicker-next-hover {
    background-color: @dropdown-link-hover-bg;
  }

  // Components
  // ------------------------------

  // Table
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;

    // Header cells
    th {
      text-align: center;
      font-weight: 400;
      border: 0;
      padding-top: @content-padding-small;
      padding-bottom: @content-padding-small;
      font-size: @font-size-small;
      color: @text-muted;
    }

    // Body cells
    td {
      border: 0;
      padding: 1px;
      position: relative;

      // Day element
      span,
      a {
        display: block;
        padding: 6px;
        text-align: center;
        text-decoration: none;
        border-radius: @border-radius-base;
        color: @text-color;
        min-width: 34px;
      }

      // Hover state
      .ui-state-hover {
        background-color: @dropdown-link-hover-bg;
      }

      &.ui-state-disabled span {
        color: #ccc;
      }

      // Week column
      &.ui-datepicker-week-col {
        padding: 6px;
        color: @text-muted;
      }

      // Active day
      &.ui-datepicker-current-day .ui-state-active {
        background-color: @color-teal-400;
        color: #fff;
      }

      // Today
      &.ui-datepicker-today .ui-state-highlight {
        background-color: @brand-primary;
        color: #fff;

        &:after {
          content: "";
          position: absolute;
          top: 3px;
          right: 3px;
          width: 0;
          height: 0;
          border-top: 6px solid #fff;
          border-left: 6px solid transparent;
        }
      }

      a.ui-priority-secondary {
        .opacity(0.6);
      }
    }
  }

  // Button panel
  .ui-datepicker-buttonpane {
    button {
      float: right;
      border: 1px solid @btn-default-border;
      background-color: @btn-default-bg;
      font-weight: 400;
      margin-top: (@list-spacing * 2);
      cursor: pointer;
      padding: @padding-base-vertical @padding-base-horizontal;
      width: auto;
      overflow: visible;
      outline: 0;
      border-radius: @border-radius-base;

      // Hover state
      &.ui-state-hover {
        .box-shadow(0 0 0 100px fade(#000, 1%) inset);
      }

      // Current date
      &.ui-datepicker-current {
        float: left;
      }

      // Active state
      &:active {
        .box-shadow(0 0 0 100px fade(#000, 3%) inset);
      }
    }
  }

  // Multiple calendars
  &.ui-datepicker-multi {
    width: auto !important;
  }
}

// Inline datepicker
.datepicker-inline {
  width: 264px;
  max-width: 100%;
  overflow-x: auto;

  .full-width&,
  .sidebar &,
  .popover & {
    width: 100%;
  }
}

// Trigger
.ui-datepicker-trigger {
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 4;
  padding: 6px;
  cursor: pointer;
}

// Clearfix
.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

// Multiple datepickers
.ui-datepicker-multi {
  .ui-datepicker-group {
    float: left;

    + .ui-datepicker-group {
      padding-left: 15px;
    }
  }

  .ui-datepicker-group-last {
    .ui-datepicker-header {
      border-left-width: 0;
    }
  }

  .ui-datepicker-buttonpane {
    clear: left;
  }
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 46%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

// Dialog
// ------------------------------

// Base
.ui-dialog {
  position: fixed;
  top: 0;
  left: 0;
  background-color: @modal-content-bg;
  border-radius: @border-radius-base;
  border: 1px solid @modal-content-border-color;
  outline: 0;
  overflow: hidden;
  .box-shadow(0 1px 4px rgba(0, 0, 0, .2));

  // Make it full width on mobiles
  @media (max-width: @screen-xs-max) {
    width: 90% !important;
  }
}

//
// Dialog header
//

// Header
.ui-dialog-titlebar {
  position: relative;
  padding: @modal-title-padding;
  padding-bottom: 0;

  // Draggable cursor
  .ui-draggable & {
    cursor: move;
  }
}

// Title
.ui-dialog-title {
  float: left;
  font-size: @font-size-h6;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Close button
.ui-dialog-titlebar-close {
  position: absolute;
  background-color: transparent;
  border: 0;
  right: @content-padding-large;
  top: 50%;
  padding: 0;
  margin-top: ((@line-height-computed - @icon-font-size) / 2);

  // Cross icon
  &:after {
    content: '\ed6b';
    font-family: 'Icomoon';
    display: block;
    width: @icon-font-size;
    font-size: @icon-font-size;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  // Remove default button shadows
  &.ui-state-hover,
  &.ui-state-focus {
    .box-shadow(none);
  }
}

//
// Dialog content
//

// Content itself
.ui-dialog-content {
  position: relative;
  border: 0;
  padding: @modal-inner-padding;
  background: none;
  overflow: auto;

  // Remove bottom margin from last childs
  .form-group:last-child,
  p:last-child {
    margin-bottom: 0;
  }
}

// Buttons
.ui-dialog-buttonpane {
  padding: @modal-inner-padding;
  padding-top: 0;

  .ui-dialog-buttonset {
    float: right;
  }

  button + button {
    margin-left: 5px;
    cursor: pointer;
  }
}

// Menu
// ------------------------------

// Base
.ui-menu {
  list-style: none;
  padding: @list-spacing 0;
  margin: 0;
  display: block;
  outline: none;
  min-width: 180px;
  white-space: nowrap;
  background-color: @dropdown-bg;
  border: 1px solid @input-border;
  border-radius: @border-radius-base;
  z-index: @zindex-dropdown;
  .box-shadow(0 1px 3px fade(#000, 10%));

  // Nested menu
  .ui-menu {
    position: absolute;
    top: -(@list-spacing + 1) !important;
  }

  // Menu item
  .ui-menu-item {
    position: relative;
    margin: 0;
    cursor: pointer;
    padding: (@padding-base-vertical + 1) @content-padding-base;
    min-height: 0;
    outline: 0;

    // Links
    > a {
      display: block;
      color: @text-color;
    }

    // Icons
    > i {
      margin-right: @element-horizontal-spacing;
    }

    // Submenu arrow icon
    > .ui-menu-icon {
      position: absolute;
      top: 50%;
      margin-top: -(@icon-font-size / 2);
      right: @content-padding-base;

      &:after {
        content: '\e9c7';
        font-family: 'icomoon';
        font-size: @icon-font-size;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        .opacity(0.8);
      }
    }

    // Disabled state
    &.ui-state-disabled {
      &,
      a {
        color: @text-muted;
        cursor: @cursor-disabled;
      }
    }
  }

  // Header
  .ui-menu-header {
    padding: (@padding-base-vertical + 1) @content-padding-base;
    font-size: @font-size-mini;
    line-height: @line-height-mini;
    text-transform: uppercase;
    color: @text-muted;
    margin-top: @list-spacing;

    // Highlighted header
    &.highlight {
      margin-top: 0;
      background-color: @dropdown-annotation-bg;
      color: @gray-light;

      // ... but remove from the first one
      &:first-child {
        margin-top: 0;
      }
    }
  }
  .ui-menu-item + .highlight,
  .highlight + .ui-menu-item {
    margin-top: @list-spacing;
  }

  // Icons
  .ui-menu-item > a,
  .ui-menu-header {
    > i[class*=icon-] {
      margin-top: ((@line-height-computed - @icon-font-size) / 2);
      float: left;
      margin-right: @content-padding-small;
      top: 0;

      // Right icon
      &.pull-right {
        margin-right: 0;
        margin-left: @content-padding-small;
      }
    }
  }

  // Divider
  .ui-menu-divider {
    margin: @list-spacing 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-top: 1px solid @dropdown-divider-bg;
  }

  // States
  .ui-state-focus,
  .ui-state-active {
    color: @dropdown-link-hover-color;
    background-color: @dropdown-link-hover-bg;
  }

  // Disabled state
  &.ui-state-disabled {
    &,
    .ui-menu-item,
    a {
      color: @text-muted;
      cursor: @cursor-disabled;
    }
  }
}

// Progress bar
// ------------------------------

// Base
.ui-progressbar {
  height: @progress-base-height;
  overflow: hidden;
  position: relative;
  background-color: @progress-bg;
  border-radius: @progress-border-radius;
  .box-shadow(inset 0 1px 1px fade(#000, 10%));
}

// Value
.ui-progressbar-value {
  float: left;
  width: 0%;
  height: 100%;
  background-color: @progress-bar-bg;
  color: #fff;
  overflow: hidden;
  .transition(width .6s ease);
}

// Overlay
.ui-progressbar-value,
.ui-progressbar-overlay {
  height: 100%;
  background-size: 40px 40px;
}

// Stripes
.ui-progressbar-striped {
  .ui-progressbar-value,
  .ui-progressbar-overlay {
    #gradient > .striped();
  }
}

// Stripes for overlay
.ui-progressbar-overlay {
  #gradient > .striped();
}

// Animated stripes
.ui-progressbar-active .ui-progressbar-value,
.ui-progressbar-overlay {
  .animation(progress-bar-stripes 2s linear infinite);
}

// Remove stripes in indeterminate mode
.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none;
}

// Select menu
// ------------------------------

// Base
.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: none;

  // Set max width for menu
  .ui-menu {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;

    // Optgroups
    .ui-selectmenu-optgroup {
      font-size: @font-size-mini;
      font-weight: 700;
      line-height: @line-height-mini;
      padding: @padding-base-vertical @padding-base-horizontal;
      margin: 2px 0;
      text-transform: uppercase;
      height: auto;
      border: 0;

      // Add double horizontal padding for items
      ~ .ui-menu-item {
        padding-left: (@padding-base-horizontal * 2);
      }
    }
  }
}

// Display if opened
.ui-selectmenu-open {
  display: block;
}

// Select button
.ui-selectmenu-button {
  display: inline-block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  height: @input-height-base;
  padding: @padding-base-vertical @padding-base-horizontal;
  padding-right: ((@padding-base-horizontal * 2) + @content-padding-small);
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  outline: 0;

  // Darken on hover and focus
  &.ui-state-hover,
  &.ui-state-focus {
    .box-shadow(0 0 0 100px fade(#000, 1%) inset);
  }

  // Down arrow
  &:after {
    content: '\e9c5';
    font-family: 'Icomoon';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: @padding-base-horizontal;
    text-align: right;
    margin-top: -(@icon-font-size / 2);
    font-size: @icon-font-size;
    line-height: 1;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  // Button text
  .ui-selectmenu-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// Disabled menu
.ui-selectmenu-disabled {
  cursor: @cursor-disabled;
  background-color: @input-bg-disabled;
  color: @gray-light;

  &.ui-state-hover,
  &.ui-state-focus {
    .box-shadow(none);
  }
}

//
// Optional sizing to match form controls
//

// Large
.ui-selectmenu-lg {
  .ui-selectmenu-button {
    height: @input-height-large;

    .ui-selectmenu-text {
      padding: @padding-large-vertical @padding-large-horizontal;
      padding-right: ((@padding-large-horizontal * 2) + @content-padding-small);
    }
  }
}

// Small
.ui-selectmenu-sm {
  .ui-selectmenu-button {
    height: @input-height-small;

    .ui-selectmenu-text {
      padding: @padding-small-vertical @padding-base-horizontal;
      padding-right: ((@padding-small-horizontal * 2) + @content-padding-small);
      font-size: @font-size-small;
      line-height: @line-height-small;
    }
  }
}

// Mini
.ui-selectmenu-xs {
  .ui-selectmenu-button {
    height: @input-height-mini;

    .ui-selectmenu-text {
      padding: @padding-xs-vertical @padding-xs-horizontal;
      padding-right: ((@padding-xs-horizontal * 2) + @content-padding-small);
      font-size: @font-size-small;
      line-height: @line-height-small;
    }
  }
}

//
// Images
//

.ui-selectmenu-images {

  // Image base
  .ui-menu-item > span {
    display: inline-block;
    margin-right: @content-padding-small;
    border-radius: @border-radius-small;
    width: @line-height-computed;
    height: @line-height-computed;
    background-size: @line-height-computed @line-height-computed;
    float: left;
  }

  // Demo images, replace with your own
  .demo-img-amazon {
    background: url('../images/brands/amazon.png') no-repeat;
  }
  .demo-img-youtube {
    background: url('../images/brands/youtube.png') no-repeat;
  }
  .demo-img-twitter {
    background: url('../images/brands/twitter.png') no-repeat;
  }
  .demo-img-bing {
    background: url('../images/brands/bing.png') no-repeat;
  }
  .demo-img-spotify {
    background: url('../images/brands/spotify.png') no-repeat;
  }
}

// Sliders
// ------------------------------

.ui-slider {
  position: relative;
  text-align: left;
  background-color: @gray-lighter;
  border-radius: 100px;
  .box-shadow(inset 0 1px 1px fade(#000, 10%));

  // Handle
  .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: (@slider-base-size * 3);
    height: (@slider-base-size * 3);
    cursor: pointer;
    border-radius: 50%;
    background-color: #fcfcfc;
    border: 1px solid #bbb;
    outline: 0;

    // Hover color
    &.ui-state-hover,
    &.ui-state-focus {
      background-color: #f8f8f8;

      // Mute circle
      &:after {
        .opacity(0.9);
      }
    }

    // Active color
    &.ui-state-active {
      background-color: #fefefe;

      // Mute circle
      &:after {
        .opacity(0.9);
      }
    }

    // Inner circle
    &:after {
      content: '';
      display: inline-block;
      width: @slider-base-size;
      height: @slider-base-size;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -(@slider-base-size / 2);
      margin-left: -(@slider-base-size / 2);
      background-color: @color-slate-600;
      border-radius: 50%;
    }
  }

  // Range
  .ui-slider-range {
    position: absolute;
    z-index: 1;
    display: block;
    border: 0;
    background-color: @color-slate-500;
    border-radius: 100px;
  }

  // Disabled state
  &.ui-slider-disabled {
    .opacity(0.6);
  }
}

//
// Orientations
//

// Horizontal
.ui-slider-horizontal {
  height: @slider-base-size;

  // Handle
  .ui-slider-handle {
    top: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
    margin-left: -(@slider-base-size * 1.5);
  }

  // Ranges
  .ui-slider-range {
    top: 0;
    height: 100%;
  }
  .ui-slider-range-min {
    left: 0;
  }
  .ui-slider-range-max {
    right: 0;
  }
}

// Vertical
.ui-slider-vertical {
  width: @slider-base-size;
  height: 150px;
  display: inline-block;
  margin: 0 10px;

  // Handle
  .ui-slider-handle {
    left: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
    margin-bottom: -(@slider-base-size * 1.5);
  }

  // Ranges
  .ui-slider-range {
    left: 0;
    width: 100%;
  }
  .ui-slider-range-min {
    bottom: 0;
  }
  .ui-slider-range-max {
    top: 0;
  }
}

//
// Handles
//

// Slider with solid handle
.ui-slider-solid {
  .ui-slider-handle {
    background-color: @gray-light;
    border-color: @gray-light;
    .box-shadow(none);

    &:after {
      background-color: #fff;
      .transition(opacity ease-in-out 0.2s);
    }

    &.ui-state-hover:after,
    &.ui-state-active:after {
      background-color: #fff;
      .opacity(0.75);
    }
  }
}

// White handle
.ui-handle-white .ui-slider-handle:after {
  content: none;
}

//
// Sizing
//

// Large
.ui-slider-lg {

  // Handle
  .ui-slider-handle {
    width: (@slider-large-size * 3);
    height: (@slider-large-size * 3);

    // Inner circle
    &:after {
      width: @slider-large-size;
      height: @slider-large-size;
      margin-top: -(@slider-large-size / 2);
      margin-left: -(@slider-large-size / 2);
    }
  }

  // In horizontal orientation
  &.ui-slider-horizontal {
    height: @slider-large-size;

    .ui-slider-handle {
      top: -(@slider-large-size * 1.5) + (@slider-large-size / 2);
      margin-left: -(@slider-large-size * 1.5);
    }
  }

  // In vertical orientation
  &.ui-slider-vertical {
    width: @slider-large-size;

    .ui-slider-handle {
      left: -(@slider-large-size * 1.5) + (@slider-large-size / 2);
      margin-bottom: -(@slider-large-size * 1.5);
    }
  }
}

// Small and mini have the same handle size
.ui-slider-sm,
.ui-slider-xs {
  .ui-slider-handle {
    width: (@slider-small-size * 3);
    height: (@slider-small-size * 3);

    // Inner circle
    &:after {
      width: @slider-small-size;
      height: @slider-small-size;
      margin-top: -(@slider-small-size / 2);
      margin-left: -(@slider-small-size / 2);
    }
  }
}

// Small
.ui-slider-sm {

  // In horizontal orientation
  &.ui-slider-horizontal {
    height: @slider-small-size;

    .ui-slider-handle {
      top: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
      margin-left: -(@slider-small-size * 1.5);
    }
  }

  // In vertical orientation
  &.ui-slider-vertical {
    width: @slider-small-size;

    .ui-slider-handle {
      left: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
      margin-bottom: -(@slider-small-size * 1.5);
    }
  }
}

// Mini
.ui-slider-xs {

  // In horizontal orientation
  &.ui-slider-horizontal {
    height: @slider-mini-size;

    .ui-slider-handle {
      top: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
      margin-left: -(@slider-small-size * 1.5);
    }
  }

  // In vertical orientation
  &.ui-slider-vertical {
    width: @slider-mini-size;

    .ui-slider-handle {
      left: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
      margin-bottom: -(@slider-small-size * 1.5);
    }
  }
}

//
// Contextual colors
//

.ui-slider-primary .ui-slider-range,
.ui-slider-solid.ui-slider-primary .ui-slider-handle {
  background-color: @brand-primary;
  border-color: @brand-primary;
}

.ui-slider-danger .ui-slider-range,
.ui-slider-solid.ui-slider-danger .ui-slider-handle {
  background-color: @brand-danger;
  border-color: @brand-danger;
}

.ui-slider-success .ui-slider-range,
.ui-slider-solid.ui-slider-success .ui-slider-handle {
  background-color: @brand-success;
  border-color: @brand-success;
}

.ui-slider-warning .ui-slider-range,
.ui-slider-solid.ui-slider-warning .ui-slider-handle {
  background-color: @brand-warning;
  border-color: @brand-warning;
}

.ui-slider-info .ui-slider-range,
.ui-slider-solid.ui-slider-info .ui-slider-handle {
  background-color: @brand-info;
  border-color: @brand-info;
}

// Spinner
// ------------------------------

// Base
.ui-spinner {
  position: relative;
  display: table;
}

// Input
.ui-spinner-input {
  padding-right: (@padding-base-vertical * 2) + @icon-font-size;
  display: table-cell;
  width: 100%;
  border-radius: @input-border-radius 0 0 @input-border-radius;
  border-right: 0;
}

//
// Buttons
//

// Button base
.ui-spinner-button {
  font-size: 0;
  color: @text-color;
  cursor: pointer;
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: 0;
  display: table-cell;
  width: 1%;
  padding: 0 @padding-base-vertical;

  // Button icons base
  &:after {
    font-family: 'Icomoon';
    display: inline-block;
    width: @icon-font-size;
    font-size: @icon-font-size;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  // Remove left border from 2ns button
  & + & {
    border-left: 0;
  }

  // Hide button text
  .ui-button-text {
    display: none;
  }

  // Hover/focus states
  &.ui-state-hover,
  &.ui-state-focus {
    color: @text-color;
  }

  // Disabled state
  &.ui-state-disabled {
    background-color: @input-bg-disabled;
    color: @text-muted;
    cursor: @cursor-disabled;
    .box-shadow(none);
  }
}

// Up button icon
.ui-spinner-up {
  &:after {
    content: '\e9f7';
  }
}

// Down button icon
.ui-spinner-down {
  &:after {
    content: '\e9e2';
  }
  .border-right-radius(@input-border-radius);
}

// Tabs
// ------------------------------

.ui-tabs {
  position: relative;

  // Tabs navigation
  .ui-tabs-nav {
    margin-bottom: @line-height-computed;
    border-bottom: 1px solid @nav-tabs-border-color;

    // Items
    li {
      list-style: none;
      position: relative;
      padding: 0;
      white-space: nowrap;
      margin-bottom: -1px;

      // Setup desktop view
      @media (min-width: @screen-sm-min) {
        float: left;
      }
    }

    // Links
    .ui-tabs-anchor {
      display: block;
      color: @color-grey-400;
      padding: @nav-link-padding;
      border: 1px solid transparent;
      border-top-width: 2px;
    }

    // Hover/focus states
    .ui-state-hover,
    .ui-state-focus {
      .ui-tabs-anchor:not(.ui-state-disabled) {
        color: @text-color;
      }
    }

    // Active item
    .ui-tabs-active {
      .ui-tabs-anchor {
        color: @nav-tabs-active-link-hover-color;
        background-color: @nav-tabs-active-link-hover-bg;
        cursor: default;
        border-color: @brand-primary @nav-tabs-active-link-hover-border-color transparent;
      }
    }

    // Disabled item
    .ui-state-disabled {
      color: @nav-disabled-link-color;
      cursor: @cursor-disabled;
      .opacity(0.75);
    }

    // Add bottom border and bg to sortable helper
    .ui-sortable-helper:not(.ui-tabs-active) {
      .ui-tabs-anchor {
        background-color: #fff;
        border-bottom-color: @nav-tabs-border-color;
      }
    }

    // Setup mobile view
    @media (max-width: @screen-xs-max) {
      border-bottom: 0;
      position: relative;
      background-color: #fff;
      padding: @list-spacing 0;
      border: 1px solid @panel-default-border;
      border-radius: @border-radius-base;

      // Tab nav item
      li {
        margin-bottom: 0;

        // Add 1px spacing between items
        & + li {
          margin-top: 1px;
        }
      }

      // Add permanent link styles
      .ui-tabs-anchor {
        border-width: 0 0 0 2px;
        border-left-color: transparent;
      }

      // Background color for hover/focus states
      .ui-state-hover,
      .ui-state-focus {
        .ui-tabs-anchor {
          background-color: @nav-tabs-mobile-link-hover-bg;
        }
      }

      // Left border and bg colors for active link
      .ui-state-active {
        .ui-tabs-anchor {
          border-left-color: @brand-primary;
          background-color: @nav-tabs-mobile-link-active-bg;
        }
      }

      // Add text header to the tabs section
      &:before {
        content: 'Contents';
        color: inherit;
        font-size: @font-size-small;
        line-height: @line-height-small;
        font-weight: 500;
        margin-top: (@content-padding-base - @list-spacing);
        margin-left: @content-padding-base;
        margin-bottom: @content-padding-base;
        text-transform: uppercase;
        .opacity(0.5);
      }
    }
  }

  // Display tabs panel
  .ui-tabs-panel {
    display: block;
  }
}

// Tooltip
// ------------------------------

.ui-tooltip {
  position: absolute;
  z-index: @zindex-tooltip;
  max-width: @tooltip-max-width;
  padding: 3px 8px;
  color: @tooltip-color;
  text-align: center;
  background-color: @tooltip-bg;
  border-radius: @border-radius-base;
}

// Misc
// ------------------------------

// Overlay
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: @modal-backdrop-bg;
  .opacity(@modal-backdrop-opacity);
}

//
// Layout helpers
//

// Hide element
.ui-helper-hidden {
  display: none;
}

// Accessible element
.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

// Reset
.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  list-style: none;
}

// Clearfix
.ui-helper-clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
    border-collapse: collapse;
  }

  &:after {
    clear: both;
  }
}

// iFrame fix
.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  .opacity(0);
}

// Overlay z-index
.ui-front {
  z-index: @zindex-modal-background;
}
